<template>
  <a-modal
    v-model:visible="visible"
    :title="t('base.uploadImg')"
    @ok="handleOk"
    @cancel="handleCancel"
    width="548px"
    :footer="null"
    destroyOnClose
    class="s-vue-cropper"
    :z-index="1002"
  >
    <div style="width: 500px; margin: 0 auto">
      <!-- <a-row align="middle" justify="start" style="width: 500px">
        <a-col span="4">
          <a-input-number
            :min="1"
            :max="10"
            @keyup="
              ({ target }) => {
                onlyIntp(target);
              }
            "
            v-model:value="option.fixedNumber[0]"
            prefix="宽："
            style="width: 100%"
          >
          </a-input-number>
        </a-col>
        <a-col span="1" style="text-align: center">:</a-col>
        <a-col span="4">
          <a-input-number
            :min="1"
            :max="10"
            @keyup="
              ({ target }) => {
                onlyIntp(target);
              }
            "
            v-model:value="option.fixedNumber[1]"
            prefix="高："
            style="width: 100%"
          >
          </a-input-number>
        </a-col>
      </a-row> -->
      <a-row style="width: 100%; height: 400px; margin-top: 10px">
        <VueCropper
          style="width: 100%; height: 100%"
          ref="vue_cropper"
          v-bind="{ ...option }"
        >
        </VueCropper>
      </a-row>
      <a-row
        align="middle"
        justify="space-between"
        style="width: 500px; margin-top: 10px"
      >
        <a-col :span="6" align="left">
          <a-upload
            accept="image/*"
            :show-upload-list="false"
            :multiple="false"
            :beforeUpload="beforeUpload"
            :customRequest="customRequest"
          >
            <a-button type="primary">{{ t("base.clickToUploadImg") }}</a-button>
          </a-upload>
        </a-col>
        <a-col :span="6" align="center">
          <a-button type="primary" @click="rotateLeft">{{
            t("base.rotateLeftImg")
          }}</a-button>
        </a-col>
        <a-col :span="6" align="center">
          <a-button type="primary" @click="rotateRight">{{
            t("base.rotateRightImg")
          }}</a-button>
        </a-col>
        <a-col :span="6" align="right">
          <a-button type="primary" @click="getCropDataBase64">{{
            t("base.getScreenshot")
          }}</a-button>
        </a-col>
      </a-row>
    </div>
  </a-modal>
</template>
<style lang="less">
.s-vue-cropper {
  top: 15%;
}
</style>
<script setup lang="ts" name="VueCropper">
import { ref } from "vue";
import { fileToBase64Url, base64UrlToFile, beforeUpload } from "./utils";
import { option, defaultOption } from "./store";
import "vue-cropper/dist/index.css";
import { VueCropper } from "vue-cropper";
const t = $t;
const vue_cropper = ref<any>(null);
const emit = defineEmits(["uploadImage"]);
const visible = ref<boolean>(false);
const filename = ref<any>("");
const fileObject = ref<any>(null);
const previewBase64Url = ref<any>("");
const customRequest = async ({ file }: any) => {
  fileToBase64Url(file, (base64Url: any) => {
    filename.value = file.name;
    option.img = base64Url;
  });
};
const rotateLeft = () => {
  vue_cropper.value.rotateLeft();
};
const rotateRight = () => {
  vue_cropper.value.rotateRight();
};
const getCropDataBase64 = () => {
  vue_cropper.value.getCropData((base64Url: any) => {
    fileObject.value = base64UrlToFile(base64Url, filename.value);
    previewBase64Url.value = base64Url;
    visible.value = false;
    emit("uploadImage", fileObject.value, previewBase64Url.value);
  });
};
const handleOk = (e: MouseEvent) => {
  visible.value = false;
  emit("uploadImage", fileObject.value, previewBase64Url.value);
};
const handleCancel = () => {};
const resetData = () => {
  previewBase64Url.value = "";
  fileObject.value = null;
  filename.value = "";
  vue_cropper.value = null;
  initObjAttr(option, defaultOption);
};
const showModal = () => {
  visible.value = true;
  resetData();
};

defineExpose({
  showModal,
});
</script>
